<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>

        <style type="text/css">
            body { margin: 15px ; border: 1px solid #dedede; }
            .wrapper { margin: 25px ; border: 1px solid blue ; }
            .inner { margin: 25px ; border: 1px solid red ; height: 30px; }
            .inner>* { border: 1px solid green ;}
        </style>

    </head>
    <body>

        <ul class="wrapper">
            <li class="inner">宋江</li>
            <li class="inner">孙悟空</li>
            <li class="inner">诸葛亮</li>
        </ul>

        <div class="wrapper">
            <div class="inner"><b>朱某红</b></div>
            <div class="inner"><span>马飞燕</span></div>
            <div class="inner"><s>郑仙女</s></div>
        </div>

        <script type="text/javascript">
            let fn = function(event){
                event.stopPropagation();
                let t = event.target;
                console.log( t.innerHTML );
            }
            document.addEventListener( 'click' , fn , true );
            /*
            let wrappers = document.querySelectorAll( '.wrapper' );
            console.log( wrappers );

            Array.from( wrappers ).forEach( e => {
                let fn = function(event){
                    event.stopPropagation();
                    let t = event.target;
                    console.log( t.innerHTML );
                }
                e.addEventListener( 'click' , fn , true);
            });
            */
        </script>
        
    </body>
</html>